<template>
  <div class="tree-item">
    <div class="left-box">
      <i v-if="isRoot" class="el-icon-s-home" />
      <span class="title" :class="{isroot: isRoot}">{{ treeNode.name }}</span>
    </div>
    <div class="right-box">
      <span class="manager">{{ treeNode.manager }}</span>
      <el-dropdown @command="clickItem">
        <span class="el-dropdown-link">
          操作<i class="el-icon-arrow-down el-icon--right" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="add">添加子部门</el-dropdown-item>
          <el-dropdown-item v-if="!isRoot" command="view">查看部门</el-dropdown-item>
          <el-dropdown-item v-if="!isRoot" command="del">删除部门</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    treeNode: {
      type: Object,
      // 对象或数组的默认值是必须从一个函数里获取
      default() {
        return {
          name: '江苏传智播客教育科技股份有限公司',
          manager: '负责人',
          id: ''
        }
      }
    },
    // 用这个标记是不是最外层的
    isRoot: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    clickItem(cmd) {
      // 分支语句，if适合一些范围判断，switch适合极少的固定值
      switch (cmd) {
        case 'add':
          // 做添加子部门
          this.$emit('add', this.treeNode.id)
          break
        case 'view':
          // 做查看部门
          this.$emit('view', this.treeNode.id)
          break
        case 'del':
          // 删除部门 -- 通知父做删除，并携带要删的id
          this.$emit('del', this.treeNode.id)
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.tree-item {
    display: flex;
    justify-content: space-between;
    width: 100%;

    .title {
        margin-left: 10px;
        &.isroot {
            font-weight: 700;
        }
    }
    .right-box {
        font-size: 14px;
        .manager {
            margin-right: 30px;
        }
    }
}

</style>
